<template>
	<div class="animation-area">
		<!-- 用户下单动画 -->
		<div class="welcome" v-if="welcome">
			恭喜<span class="username">{{nickname}}</span>下单成功！
		</div>
	</div>
</template>

<script>
	export default {
		name: 'LivePay',
		props: {
			nick: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				welcome: false,
                nickname: ''
			}
		},
		onLoad(option) {
			
		},
		methods: {
			welcomeUser(nick) {
				if (this.welcome) return;
                this.nickname = nick;
				this.welcome = true;
				setTimeout(() => this.welcome = false, 2000);
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.animation-area {
		/* position: absolute; */
        /* bottom: 600px; */
        /* left: 0; */
        /* right: 0; */
        width: 340px;
		height: 40px;
        overflow: hidden;
	}

	.welcome {
		background: linear-gradient(to right, rgba(173,46,253,0.8), rgba(173,46,253,0));
		color: #fff;
		font-size: 12px;
		padding: 3px 10px;
		border-top-left-radius: 100px;
		border-bottom-left-radius: 100px;
		animation: welcome 2s forwards;
		position: absolute;
		top: 80px;
		width: 220px;
		right: -300px;
        overflow: hidden;
		
		.username {
			font-size: 14px;
			padding: 0 2px;
			font-weight: bold;
		}
	}
	
	.send {
		border: 1px solid red;
		background: #ff2b2b;
		color: #fff;
		text-align: center;
	}

	@keyframes welcome {
		0% { left: 200px; background: linear-gradient(to right, rgba(173,46,253,0), rgba(173,46,253,0)); }
		20% { left: 15px; background: linear-gradient(to right, rgba(173,46,253,0.8), rgba(173,46,253,0)); }
		30% { left: 18px; background: linear-gradient(to right, rgba(173,46,253,0.8), rgba(173,46,253,0)); }
		60% { left: 20px; background: linear-gradient(to right, rgba(173,46,253,0.8), rgba(173,46,253,0)); }
		70% { left: 20px; background: linear-gradient(to right, rgba(173,46,253,0.8), rgba(173,46,253,0)); }
		80% { left: 20px; background: linear-gradient(to right, rgba(173,46,253,0.8), rgba(173,46,253,0)); }
		90% { left: 5px; background: linear-gradient(to right, rgba(173,46,253,0), rgba(173,46,253,0)); }
		100% { left: -300px; background: linear-gradient(to right, rgba(173,46,253,0), rgba(173,46,253,0)); }
	}
</style>